<template>
  <main class="rank" v-if="rankData">
    <span class="title">各科目成绩概览</span>
    <el-scrollbar>
      <section v-for="item in rankData" :key="item.examName">
        <div class="box">
          <article>{{ item.rank }}</article>
          <main>
            <p>{{ item.examName }}</p>
            <span :style="scoreStyle(item.score)">{{ item.level }}</span>
          </main>
        </div>
        <div class="score" :style="scoreStyle(item.score)">{{ item.score ? item.score : '0' }}</div>
      </section>
    </el-scrollbar>
  </main>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { IPerExamRank } from '../../../../../type/index';

interface IProps {
  data: IPerExamRank[];
}

const deepGreen = '#16a273';
const orange = '#ffc761';
const deepOrange = '#ff8257';
const red = '#f96468';
const gray = '#bfc4cc';
const props = defineProps<IProps>();
const rankData = ref<IPerExamRank[]>(props.data);

const scoreStyle = computed(() => (stringScore: string) => {
  const score = Number(stringScore);
  if (score >= 80) return `color: ${deepGreen}`;
  else if (score >= 70 && score <= 79) return `color: ${orange}`;
  else if (score >= 60 && score <= 69) return `color: ${deepOrange}`;
  else if (score <= 59 && score !== 0) return `color: ${red}`;
  // else return `color: ${gray}`;
});

watch(props, newValue => {
  rankData.value = newValue.data;
});
</script>

<style lang="scss" scoped>
.rank {
  padding: 16px 8px;
  // border: 2px solid red;

  .title {
    margin: 0 0 8px 8px;
    font-size: 16px;
  }

  .el-scrollbar {
    width: 100%;
    section {
      height: 60px;
      padding: 8px;
      display: flex;
      justify-content: space-between;
      border-radius: 16px;
      margin-bottom: 8px;

      .box {
        display: flex;
        article {
          display: flex;
          align-items: center;
          font-size: 32px;
          font-weight: 400;
          color: var(--font-color);
        }
        main {
          margin-left: 16px;
          color: var(--font-color);
          p {
            font-size: 18px;
          }
          span {
            font-size: 12px;
          }
        }
      }

      .score {
        font-size: 28px;
        color: var(--font-color);
      }
    }
  }
}
</style>
